<template>
	<div class="ToCode">
		<div class="head_two">
			<i class="iconfont icon-mine_left" @click="$router.back(-1)"></i>
		</div>
		<div class="login_cont">
			<p class="title">验证手机</p>
			<ul class="logUl"> 
				<li><input type="" name="" placeholder="请输入验证码" v-model="yzm"></li>
				{{filterPhone}}
			</ul>
			
			<p v-if="Boole" class="p_one">接收短信大约需要<a>{{time}}</a>秒</p>
			<p v-else class="p_one"><a @click="restart()">重新获取</a></p>
			<button v-if="type==2" class="button" :class="{backg:isShow}" @click="ToPassWord()">下一步</button>
			<button v-else-if="type==3" class="button" :class="{backg:isShow}" @click="ResetPswds()">下一步2</button>
			<button v-else class="button" :class="{backg:isShow}" @click="OnceLogin()">登录</button>
 	
		</div>
	</div>
</template>
<script type="text/javascript"> 
import { Toast } from 'mint-ui';
import Qs from 'qs';
	export default{
		name:'ToCode',
		data(){
			return{
				type:'',
				time: 5,   //默认倒数60秒
				Boole:true,
				isShow:false,
				yzm:''

			}
		},
		created:function(){
			 this.urls=this.$store.state.urls;
		},
		mounted:function(){
			this.myPhone=this.$route.params.phone;
			this.type=this.$route.params.type;
			this.timer();
			/*this.getSendVer();*/
		},
		computed:{
			filterPhone:function() {
				if (this.yzm.length>3) {
					this.isShow=true
				}else{
					this.isShow=false
				}
			}
		},
		methods:{
		
		//获取验证码
		getSendVer:function(){ 
				if (this.type==2){ 
					 this.listData={
						'MembersID':this.myPhone,
						'Type':'phone',
						'UseType':'register'
					} 
				}else if(this.type==3){
					 this.listData={
						'MembersID':this.myPhone,
						'Type':'phone'
					}

				}else if(this.type==4){ 
					 this.listData={
						'MembersID':this.myPhone,
						'Type':'phone'
					}

				}else{
					return false
				} 
				this.$http.get(this.urls+'/WorkMembers/v1.0/SendVer',{
						params:this.listData
					}).then((res)=>{ 
		    			Toast(res.data.Return_Mess);
		    			/*if (res.data.Return_ID==5){
		    				setTimeout(this.terUrl,3000) 
		    			}*/
		    		  
				  }).catch((err)=>{
				    console.log(err);
				  });
			},
			//倒计时
			timer:function(){
				if(this.time>0){
					 this.time--;
					 setTimeout(this.timer, 1000);
				}else{
					this.Boole=false;
					this.time=5;	 
				}
			},
			//点击重新获取
			restart:function(){
				this.Boole=true;
				this.timer();
				this.getSendVer();
			},
			ToPassWord:function(){
				 if (this.isShow==true) {
					this.$router.push({path:'/LoginAll/ToPassWord/'+this.yzm+'/'+this.myPhone})  
				}else{
					Toast("不能为空哟~")
				}
			},
			ResetPswds:function(){
				if (this.isShow==true) {
					this.$router.push({path:'/LoginAll/ResetPswds/'+this.yzm+'/'+this.myPhone})  
				}else{
					Toast("不能为空哟~")
				}
			},
			//返回登录首页
			terUrl:function(){
				this.$router.push({path:'/LoginAll/ToLogin'}) 
			},
			OnceLogin:function(){
				this.$http.post(this.urls+"/WorkMembers/v1.0/VerLogin",Qs.stringify({
					  "Phone":this.myPhone,
					  "Ver":this.yzm 
				})).then((res)=>{ 
		    			Toast(res.data.Return_Mess);  
		    			console.log(res.data)
		    			
				  }).catch((err)=>{
				    console.log(err);
				  });
			}
		}
		
	}
</script>
<style scoped>
 
	.logUl{
		width: 100%;
	}
	.logUl li{
		border-bottom: 1px solid #e8e8e8;
		height: 1.3333333333rem;
	}
	.logUl li input{
		width: 100%;
		height: 100%;
	 	border:0;
		outline: none;
		text-indent: 0.3333333333rem;
		font-size: 0.4rem;
	}
	.logUl li span{
		font-size: 0.4rem;
		line-height: 1.2rem;
		text-indent: 0.2666666667rem;
	}
	.button{
		width: 100%;
		outline: none;
		height:1.0666666667rem;
		color: #fff;
		font-size: 0.4533333333rem;
		background-color: #ccc;
		border:0;
		border-radius: 0.0666666667rem;
		margin:1.3333333333rem 0;
	}
	.backg{
		background-color: #db2023;
	} 
	.p_one{
		text-align: center;
		font-size: 0.4rem;
		color: #999999;
		margin-top: 0.8666666667rem;
	}
	.p_one a{
		color: #3462ff;
	}
	
</style>